<template>
  <!--租户收款账号管理 -->
  <div class="main" v-loading="loading">
    <div class="left">
      <section class="title" style="line-height: 25px;font-weight: bold;">
        <!-- -1，待定 0，禁用 1 启用 -->
        <p class="title_before title_name">页面列表 <i class="el-icon-circle-plus-outline blueColor font_20"
                                                   @click="openAddPage"></i></p>

      </section>

      <!--<div class="f_center">-->
        <!--<el-input placeholder="请输入内容" @keyup.enter.native="getList2" v-model="search"  class="input-with-select">-->
        <!--</el-input>-->

        <!--<el-button slot="append" @click="getList2" style="font-size:30px;" icon="el-icon-search" type="primary"></el-button>-->

      <!--</div>-->

      <el-tooltip v-for="(item,index) in pages" :open-delay="350" effect="dark"
                  :content="$dictUtils.getDictLabel('state', item.state, '')+item.remark"
                  placement="left-end">
        <section class="item" @click="selectPage(item)">
          <!-- {{item.state}} -->
          <section v-if="item.state==1" class="flagYes flagBtn"></section>
          <section v-if="item.state==0" class="flagNo flagBtn"></section>
          <section v-if="item.state==-1" class="flagNo2 flagBtn"></section>
          {{$dictUtils.getDictLabel("statisticsPage", item.pageHref, "")}}
        </section>
      </el-tooltip>
      <!--<section style="position: absolute;bottom: 30px;">-->

        <!--<el-pagination background layout="prev, pager, next" :total="page.total">-->
        <!--</el-pagination>-->
      <!--</section>-->

    </div>
    <div class="right">
      <div class="right_title f_center">
        <section>
          <p class="title">页面预览</p>
        </section>
        <section>
          <section style="font-size: 18px;font-weight: bold;">
            <el-button type="primary" @click="edit">修改</el-button>
            <el-button type="primary" @click="delPage">删除</el-button>
            <el-button type="primary" @click="editState(1)">启用</el-button>
            <el-button type="primary" @click="editState(0)">停用</el-button>
          </section>
        </section>
      </div>


      <div>
        <div class="change-data-container">
          <div class="dateBtn">
            <span v-for="item in dataBut" @click="changeData(item)"
              :class="{active:item.isActive,blueColor:item.value===2&&!item.isActive}">{{item.label}}</span>
          </div>
        </div>
        <div class="wrapper" id="wrapperControl">
          <el-row :gutter="24" style="display: flex;flex-wrap: wrap;">
            <template v-for="pageItem in pageItems">
              <!-- type===6 -->
              <el-col :span="pageItem.span" :style="{'height':pageItem.height+'px',paddingRight:0}" class="complete item_other"
                      v-if="pageItem.type==6">
                <div class="content">
                  <div class="header">
                    <p class="title">完成率指标</p>
                    <el-tooltip content="这是一段描述" placement="top">
                      <i class="iconfont iconshuoming cursor-pointer"></i>
                    </el-tooltip>
                  </div>
                  <div class="center">
                    <p class="num"><span>{{percentage}}</span><span class="mark">%</span></p>
                    <p class="statistics">
                      <span class="top_s">环比 12%</span>
                      <span class="bottom_s">同比 15.36%</span>
                    </p>
                  </div>
                  <div class="bottom">
                    <el-progress :show-text="false" :text-inside="true" :stroke-width="26" :percentage="percentage"
                                 :color="pageItem.colors"></el-progress>
                  </div>
                </div>
              </el-col>
              <el-col :span="pageItem.span" v-else-if="pageItem.type==1" :style="{'height':pageItem.height+'px',paddingRight:0}"
                      class="product">
                <div class="content ">
                  <div class="header">
                    <p class="title">{{tongji["1"].title}}</p>
                    <!--       <p><el-tooltip  :open-delay="350" effect="dark" content="这是一段描述"
                             placement="top"><i class="iconfont iconshuoming cursor-pointer"></i>
                           </el-tooltip></p> -->
                    <el-tooltip content="这是一段描述" placement="top">
                      <i class="iconfont iconshuoming cursor-pointer"></i>
                    </el-tooltip>
                  </div>
                  <div class="center flex_between">
                    <p><span class="font_50 blueColor">{{tongji["1"].oneValue | NumFormat}}</span><span>(吨)</span></p>
                    <p>2,200<span class="font_20">(车)</span></p>
                  </div>
                  <div class="bottom">
                    <p>{{tongji["1"].varString }}<span>(吨)</span></p>
                    <!-- <p><span>新订单:</span><span>20车</span><span>100吨</span></p>
                    <p><span>20%</span><i class="el-icon-top"></i></p> -->
                  </div>
                </div>
              </el-col>

              <!-- type===3 -->
              <el-col :span="Number(pageItem.span)" v-else-if="pageItem.type===3"  :style="{'height':pageItem.height+'px',paddingRight:0}"
                      class="product">
              <type-three :pageItem="pageItem"> {{pageItem.type}}</type-three>
              </el-col>
              <!-- type===4 -->
              <el-col :span="Number(pageItem.span)" v-else-if="pageItem.type===4"  :style="{'height':pageItem.height+'px',paddingRight:0}"
                      class="product">
                <type-fore :pageItem="pageItem"> {{pageItem.type}}</type-fore>
              </el-col>
              <!-- type===5 -->
              <el-col :span="Number(pageItem.span)" v-else-if="pageItem.type===5"  :style="{'height':pageItem.height+'px',paddingRight:0}"
                      class="product">
                <type-five :pageItem="pageItem"> {{pageItem.type}}</type-five>
              </el-col>
              <el-col :span="pageItem.span" v-else-if="pageItem.type==7 && pageItem.colors=='#1890ff'"
                      :style="{'height':pageItem.height+'px',paddingRight:0}">

                <div class="content">
                  <div class="header">

                    <p class="title">{{tongji["7"].title}}</p>
                    <el-tooltip content="这是一段描述" placement="top">
                      <i class="iconfont iconshuoming cursor-pointer"></i>
                    </el-tooltip>
                  </div>
                  <p style="font-size: 30px;">{{tongji['7'].threeValue}}</p>
                  <v-chart style="width: 100%;height: 90%;" :options="tongji['7'].option"></v-chart>
                </div>
              </el-col>
              <el-col :span="pageItem.span" class="product" v-else-if="pageItem.type==7 && pageItem.colors=='#f58220'"
                      :style="{'height':pageItem.height+'px',paddingRight:0}">

                <!--             <div class="content">
                                <div class="header">

                                  <p class="title">{{tongji2["7"].title}}</p>
                                  <el-tooltip content="这是一段描述" placement="top">
                                      <i class="iconfont iconshuoming cursor-pointer"></i>
                                  </el-tooltip>
                                </div>
                                <p style="font-size: 30px;">{{tongji['7'].threeValue}}</p>
                                <v-chart style="width: 100%;height: 90%;" :options="tongji['7'].option"></v-chart>
                              </div> -->
                <div class="content">
                  <div class="header">

                    <p class="title">{{tongji2["7"].title}}</p>
                    <el-tooltip content="这是一段描述" placement="top">
                      <i class="iconfont iconshuoming cursor-pointer"></i>
                    </el-tooltip>
                  </div>
                  <div class="center" style="margin-top: 9px;">
                    <p>{{tongji["7"].threeValue | NumFormat}}</p>
                  </div>
                  <v-chart style="width: 100%;height: 90%;" :options="tongji['7'].option"></v-chart>
                </div>

              </el-col>
              <!-- type===2 -->
              <el-col :span="pageItem.span" v-else-if="pageItem.type===2" class="price"
                      :style="{'height':pageItem.height+'px',paddingRight:0}">
                <div class="content">
                  <div class="header">
                    <p class="title">价格指标</p>
                    <el-tooltip content="这是一段描述" placement="top">
                      <i class="iconfont iconshuoming cursor-pointer"></i>
                    </el-tooltip>
                  </div>
                  <div class="center">
                    <div class="center-left">
                      <!--<p class="left-title">价格指标</p>-->
                      <p><span class="font_50 blueColor">1,444</span><span>元/吨</span></p>
                    </div>
                    <div class="center-right">
                      <p><span>$</span></p>
                    </div>
                  </div>
                  <div class="bottom">
                    我是一个价格的描述
                    <!--<p class="statistics">-->
                    <!--<span class="top_s">环比 12%</span>-->
                    <!--<span class="bottom_s">同比 15.36%</span>-->
                    <!--</p>-->
                  </div>
                </div>
              </el-col>


              <el-col :span="pageItem.span"
                      v-else-if="(pageItem.type==8 || pageItem.type==9 || pageItem.type==10 || pageItem.type==11 || pageItem.type==12 || pageItem.type==13 || pageItem.type==14 || pageItem.type==15 || pageItem.type==16) && pageItem.colors=='#1890ff'"
                      :style="{'height':pageItem.height+'px',paddingRight:0}" class="price">
                <div class="content">
                  <v-chart style="width: 100%;height: 100%" @mousemove="mousemove"
                           :options="tongji[pageItem.type].option"></v-chart>
                  <p class="x-axis-tip"></p>
                </div>
              </el-col>
              <el-col :span="pageItem.span"
                      v-else-if="(pageItem.type==8 || pageItem.type==9 || pageItem.type==10 || pageItem.type==11 || pageItem.type==12 || pageItem.type==13 || pageItem.type==14 || pageItem.type==15 || pageItem.type==16) || pageItem.type==16 && pageItem.colors=='#f58220'"
                      :style="{'height':pageItem.height+'px'}" class="price">
                <div class="content">
                  <v-chart style="width: 100%;height: 100%" :options="tongji2[pageItem.type].option"
                           @mousemove="mousemove" ref="chart"></v-chart>
                  <p class="x-axis-tip"></p>
                </div>
              </el-col>
            </template>
          </el-row>
        </div>
      </div>

    </div>
    <StatisticsTenantPageEditForm ref="StatisticsTenantPageEditForm"
                                  @refreshDataList="getList2"></StatisticsTenantPageEditForm>
    <PageEdit ref="PageEdit" @getPageItems="getDetails"></PageEdit>

  </div>

</template>
<script>
  import $ from 'jquery'
  import {
    getList,
    del,
    updateState
  } from '@/api/StatisticsPage.js'
  import {
    getDetails
  } from '@/api/StatisticsPageDetail.js'
  // import tongji from './tongji.json'
  import dataJson from './dataJson'
  import tongji2 from './tongji2.json'
  // import CountTo from 'vue-count-to'
  import ECharts from 'vue-echarts/components/ECharts'
  // import echarts from 'echarts'
  import StatisticsTenantPageEditForm from './StatisticsTenantPageEditForm.vue'
  import PageEdit from './pageEdit.vue'

  export default {
    components: {
      StatisticsTenantPageEditForm,
      PageEdit,
      'v-chart': ECharts,
      typeThree: () => import('@/views/modules/echarts/components/type3'),
      typeFore: () => import('@/views/modules/echarts/components/type4'),
      typeFive: () => import('@/views/modules/echarts/components/type5')
    },
    data () {
      return {
        dataBut: [{
          value: 1,
          label: '本年',
          isActive: true
        }, {
          value: 2,
          label: '本季度',
          isActive: false
        },
          {
            value: 3,
            label: '本月',
            isActive: false
          },
          {
            value: 4,
            label: '本周',
            isActive: false
          },
          {
            value: 5,
            label: '今日',
            isActive: false
          }
        ],
        loading: false,
        orderBy: {
          name: 'sort',
          method: 'asc'
        },
        ss1: '200',
        tongji: dataJson.data,
        tongji2: tongji2,
        percentage: 78,
        customColor: '#1890FF',
        selectPage1: {},
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0,
          percentage: 78,
          customColor: '#1890FF'
        },
        pageItems: [],

        search: '', // 搜索内容
        pages: [{
          label: '统计页1',
          state: 0
        },
          {
            label: '统计页2',
            state: 1
          },
          {
            label: '统计页3',
            state: 2
          }

        ] // 页面
      }
    },
    methods: {
      // 切换日期
      changeData (item) {
        this.tabPosition = item.value
        this.dataBut.forEach((element, index) => {
          if (item.value == this.dataBut[index].value) {
            this.dataBut[index].isActive = true
          } else {
            this.dataBut[index].isActive = false
          }
        })
        this.getList()
      },
      // eCharts 移入效果，显示全部昵称
      mousemove (params) {
        if (params.componentType === 'yAxis') {
          let offsetX = params.event.event.offsetX
          let offsetY = params.event.event.offsetY
          let elm = params.event.event.target
          let children = elm.parentNode.parentNode.parentNode.childNodes
          let yAxisTip = ''
          for (let i = 0; i < children.length; i++) {
            if (children[i].className === 'x-axis-tip') {
              yAxisTip = children[i]
              break
            }
          }
          let parent = yAxisTip.parentNode
          yAxisTip.innerText = params.value
          yAxisTip.style.left = offsetX + 'px'
          yAxisTip.style.top = offsetY + 10 + 'px'
          yAxisTip.style.display = 'block'
          parent.style.position = 'relative'
        }
      },
      // 添加页面
      openAddPage () {
        this.$refs.StatisticsTenantPageEditForm.init('add', this.pages)
      },
      // 状态修改
      // 改变状态
      editState (state) {
        this.$confirm('是否修改状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          updateState({
            id: this.selectPage1.id,
            state: state
          }).then(res => {
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: '状态修改成功'
              })
              this.getList()
            }
          })
        })
      },

      // 删除页面
      delPage () {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          del({
            ids: this.selectPage1.id
          }).then(res => {
            this.getList().then(res => {
              if (res.result.list.length == 0) {
                this.pageItems = []
                return
              }
              this.selectPage1 = res.result.list[0]
              getDetails({
                statisticsPageId: this.selectPage1.id,
                pageSize: -1,
                orderBy: this.orderBy.name,
                orderByAORC: this.orderBy.method
              }).then(res => {
                this.pageItems = res.data.result.list
              })
            })
          })
        })
      },
      edit () {
        this.$nextTick(() => {
          this.$refs.PageEdit.init('edit', this.selectPage1)
        })
      },
      getDetails () {
        this.loading = true
        getDetails({
          statisticsPageId: this.selectPage1.id,
          pageSize: -1,
          orderBy: this.orderBy.name,
          orderByAORC: this.orderBy.method
        }).then(res => {
          //  获取数据，将页面的死数据重新填入进去;
          this.handleData(res.data.result.list)
        this.loading = false
        })
      },
      /* 重新组合数据 */
      handleData (data) {
        data.forEach(item => {
          console.log(item)
          item.describes = '这是一段描述'
          if (item.type === 3 || item.type === 4 || item.type === 5) {
          item.oneValue = this.tongji[String(item.type)].oneValue
          item.oneValueSuffix = '(吨)'
          item.varString = this.tongji[String(item.type)].varString
}
        })
        this.pageItems = data
      },
      // 选择页面
      selectPage (item) {
        this.selectPage1 = item
        this.getDetails()
      },
      // 刷新列表
      getList () {
        console.log('...')
        // getList({
        //   pageNo: this.page.pageNo,
        //   pageSize: this.page.pageSize
        // }).then(res => {
        //   console.log(res.data)
        //   this.pages = res.data.result.list
        //   this.page.total = res.data.result.count

        // })
        this.loading = true
        let that1 = this
        return new Promise(function (resolve, reject) {
          getList({
            title: that1.search,
            pageNo: that1.page.pageNo,
            pageSize: that1.page.pageSize
          }).then((res) => {
            console.log(res.data)
            that1.pages = res.data.result.list
            that1.page.total = res.data.result.count
            that1.loading = false
            resolve(res.data)
          })
        })
      },
      getList2 () {
        this.loading = true
        this.getList().then(res => {
          if (!this.selectPage1) {
            this.selectPage1 = res.result.list[0]
            getDetails({
              statisticsPageId: this.selectPage1.id,
              pageSize: -1,
              orderBy: this.orderBy.name,
              orderByAORC: this.orderBy.method
            }).then(res => {
              this.pageItems = res.data.result.list
              this.loading = false
            })
          } else {
            this.loading = false
          }
        })
      }

    },
    mounted () {
      this.loading = true
      this.getList().then(res => {
        this.selectPage1 = res.result.list[0]
        getDetails({
          statisticsPageId: this.selectPage1.id,
          pageSize: -1,
          orderBy: this.orderBy.name,
          orderByAORC: this.orderBy.method
        }).then(res => {
          this.pageItems = res.data.result.list
          this.loading = false
        })
      })
      const content = document.getElementsByClassName('bg-white')
      const darkControl = document.getElementById('darkControl')
      // this.initVisitChart()
      // const bgwhite = content[content.length - 1]
      // bgwhite.style.border = 'none'
      // // bgwhite.style.background = '#EEEEEE'
      // bgwhite.style.padding = '0px'
      // darkControl.style.display = 'block'
    },
    beforeDestroy () {
      // $('#darkControl').css('display', 'none')
      // $('#wrapperControl').removeClass('night')
      // $('.jp-navbar').removeClass('nightTop')
      // $('.jp-content').removeClass('nightCenter')
      // $('.bg-white:last').removeClass('nightBg')
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .iconfont {
    font-size: 22px !important;
    color: #999;
  }

  ::v-deep .el-input--small .el-input__inner {
    height: 36px;
    line-height: 32px;
    width: 230px;
  }

  .jp-wrapper .el-tabs .el-tabs__content .el-button.el-button--default {
    border: none !important;
    background: none !important;
  }

  .bg-white {
    border: none;
    background: none;
  }

  .x-axis-tip {
    display: none;
    position: absolute;
    padding: 5px 5px;
    font-size: 12px;
    line-height: 18px;
    color: #575757;
    background: #FFFFFF;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.20);
    border-radius: 4px;
    max-width: 280px;
    white-space: normal;
    word-break: break-all;
  }

  .main {
    width: 100%;
    display: flex;

    .left {
      padding-top: 5px;
      padding-left: 10px;
      padding-right: 10px;
      // height: 89vh;
      min-height: 85vh;
      /*border-right: #EEEEEE 10px solid;;*/
      width:14%;
      height: 90%;
      background: #FFFFFF;
      box-shadow: 0px 8px 40px 0px rgba(0, 38, 115, 0.08);
      border-radius: 10px;
      overflow-y: auto;
      margin-right: 17px;
      position: relative;
      .f_center {
        height: 40px;
        margin-bottom: 38px;

        .el-input {
          height: 100%;
        }

        .el-button {
          height: 100%;
          width: 60px;
          background: linear-gradient(90deg, #3494FF, #006DFF);
          box-shadow: 0px 6px 12px 0px rgba(35, 113, 255, 0.29);
          border-radius: 0px 5px 5px 0px;

        }
      }

      .title {
        display: flex;
        font-size: 18px;

        .title_name {
          margin: 10px 5px;
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #394565;
        }

        .but {
          cursor: pointer;
        }
      }

      .item {
        line-height: 30px;
        cursor: pointer;
        display: flex;
        margin-top: 10px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #000000;
        opacity: 0.6;
        position: relative;
        padding-left: 45px;

        .flagBtn {
          width: 8px;
          height: 8px;
          position: absolute;
          top: 50%;
          left: 26px;
          transform: translate(-50%, -50%);
          border-radius: 50%;

        }

        .flagYes {
          background: #21D06F;
        }

        .flagNo {
          background-color: rgb(233, 39, 62);
        }

        .flagNo2 {

          background-color: #CCCCCC;
        }
      }

      .item:hover {
        color: #1890ff;
      }

    }

    .right {
      width:86%;
      overflow-x: auto;
      background: #fff;
      border-radius: 10px;


      .right_title {
        height: 55px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
       // background: #FFFFFF;
        //box-shadow: 0px 8px 40px 0px rgba(0, 38, 115, 0.08);
       // border-radius: 10px;
        border-bottom: 1px solid rgba(0,0,0,0.1);

      }

      .change-data-container {
        width: 100%;
        display: flex;
        position: relative;
        padding: 20px;
        //background: #FFFFFF;
       // box-shadow: 0px 8px 40px 0px rgba(0, 38, 115, 0.08);
        border-radius: 10px;
        box-sizing: border-box;
        /* 年月日日期 */
        .dateBtn {
          cursor: pointer;

          span {
            display: inline-block;
            padding: 4px 16px;
            font-size: 16px;
            margin-right:30px;
            //background: linear-gradient(90deg, #3494FF, #006DFF);
            //box-shadow: 0px 6px 12px 0px rgba(35, 113, 255, 0.29);
            border-radius: 16px;
          }

        }

        /* switch 按钮 */
        .ec_switch {
          font-size: 16px;
          font-weight: 400;
          color: #7988AD;

          span {
            margin-right: 15px;
          }
        }

        /*.item {*/
        /*width: 78px;*/
        /*height: 100%;*/
        /*line-height: 42px;*/
        /*text-align: center;*/
        /*cursor: pointer;*/
        /*}*/

        .active {
          box-shadow: 0px 6px 12px 0px rgba(35, 113, 255, 0.29);
          background: linear-gradient(90deg, #3494FF, #006DFF);
          border-radius: 16px;
          color: #fff;
        }

        .item:hover {
          color: rgba(26, 144, 255, 0.9);

        }

        .rightBut {
          position: absolute;
          top: 12px;
          cursor: pointer;
          right: 10px;
        }
      }

      .title {
        flex: 1;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #394565;
        position: relative;
        text-indent: 10px;
        letter-spacing: 1px;
      }

      .title:before {
        content: ""; /*CSS伪类用法*/
        position: absolute; /*定位背景横线的位置*/
        top: 4px;
        left: 0;
        width: 4px;
        height: 18px;
        background: #1890FF;
        border-radius: 2px;
      }
    }
  }

  ::v-deep.wrapper {
    padding:0 20px;
    box-sizing: border-box;
    .el-row {
      display: flex;
    }

    .el-col {
      margin-bottom: 12px;
      padding:0 8px!important;
      box-sizing: border-box;


        span.icon {
          display: inline-block;
          width: 80px;
          height: 80px;
          background: #1890FF;
          border-radius: 50%;
          text-align: center;
          line-height: 80px;
          font-size: 55px;
          color: #FFFFFF;
      }
      /* 环比 */
      .statistics {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;

        span {
          position: relative;
          display: inline-block;
          margin: 0 20px;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #7988AD;
        }

        span.top_s:after {
          content: "";
          width: 0px;
          height: 0px;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-bottom: 8px solid #FF0000;
          position: absolute;
          top: 7px;
          right: -19px;
        }

        span.bottom_s:after {
          content: "";
          width: 0px;
          height: 0px;
          border-top: 8px solid #15DE0B;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          position: absolute;
          top: 7px;
          right: -19px;
        }

      }

      .content {
        padding: 20px;
        height: 100%;
        background: #FFFFFF;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 10px;
        box-shadow: 0px 8px 40px 0px rgba(0, 38, 115, 0.08);
      }

      .header {
        display: flex;

        .title {
          flex: 1;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
      }

      &.complete {
        .header {
          .title {
            margin-bottom: 37px;
          }
        }

        .center {
          text-align: center;

          .num {
            font-size: 60px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;

            .mark {
              font-size: 30px;
              color: #999999;
            }
          }

          .note {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            margin-bottom: 20px;
          }
        }

        .bottom {
          margin-bottom: 10px;


        }
      }

      /*&.product {*/
      /*.center {*/
      /*display: flex;*/
      /*margin-top: 58px;*/
      /*font-family: Microsoft YaHei;*/
      /*font-weight: 400;*/
      /*color: #333333;*/

      /*p:first-child {*/
      /*flex: 1;*/
      /*font-size: 50px;*/

      /*span {*/
      /*font-size: 18px;*/
      /*}*/
      /*}*/

      /*p:last-child {*/
      /*align-self: flex-end;*/
      /*font-size: 29px;*/

      /*span {*/
      /*font-size: 14px;*/
      /*}*/
      /*}*/
      /*}*/

      /*.bottom {*/
      /*font-size: 16px;*/
      /*font-family: Microsoft YaHei;*/
      /*font-weight: 400;*/
      /*color: #333333;*/
      /*display: flex;*/
      /*margin-top: 73px;*/

      /*p {*/
      /*&:first-child {*/
      /*flex: 1;*/

      /*span:first-child {*/
      /*margin-right: 27px;*/
      /*}*/

      /*span:nth-child(2) {*/
      /*margin-right: 36px;*/
      /*}*/
      /*}*/

      /*&:last-child {*/
      /*span {*/
      /*margin-right: 12px;*/
      /*}*/
      /*}*/
      /*}*/
      /*}*/
      /*}*/
      &.product {
        .center {
          display: flex;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;

          /*p:first-child {*/
          /*flex: 1;*/
          /*font-size: 50px;*/

          /*span {*/
          /*font-size: 18px;*/
          /*}*/
          /*}*/

          p:last-child {
            align-self: flex-end;
            font-size: 29px;

            /*span {*/
              /*font-size: 14px;*/
            /*}*/
          }
        }

        .bottom {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          letter-spacing: 2px;
          color: #7988AD;
          display: flex;

          p {
            &:first-child {
              flex: 1;

              span:first-child {
                margin-right: 27px;
              }

              span:nth-child(2) {
                margin-right: 36px;
              }
            }

            &:last-child {
              span {
                margin-right: 12px;
              }
            }
          }
        }
      }

      &.price {
        .center {
          display: flex;
          .center-left {
            flex: 1;

            .left-title {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              margin-bottom: 27px;

              & + p {
                font-size: 50px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;

                span {
                  &:last-child {
                    font-size: 18px;
                    margin-left: 10px;
                  }
                }
              }
            }
          }


        }

        .bottom {
          font-size: 14px;
          color: #666666;

          span {
            font-family: Microsoft YaHei;
            font-weight: 400;

            &:nth-child(odd) {
              font-size: 14px;
              color: #666666;

            }

            &:nth-child(even) {
              font-size: 16px;
              color: #333333;
              margin: 0 15px 0 10px;
            }
          }
        }
      }
    }


    &.night {
      .el-col {
        .content {
          background: #242B49;
        }

        .header {
          .title {
            color: #FFFFFF;
          }
        }

        &.complete {
          .center {
            .num {
              color: #1890FF;
            }

            .note {
              color: #999999;
            }
          }

          .bottom {
            .el-progress {
              .el-progress-bar__inner {
                background-image: linear-gradient(to right, #6F5DF6, #C55FF9);
              }

              .el-progress-bar__outer {
                background: #DDDDDD;
              }
            }
          }
        }

        &.product {
          .center {
            p {
              &:first-child {
                color: #E9975F;

                span {
                  color: #999999;
                }
              }

              &:last-child {
                color: #1890FF;

                span {
                  color: #999999;
                }
              }
            }
          }

          .bottom {
            p {
              &:first-child {
                span {
                  color: #1890FF;

                  &:first-child {
                    color: #999999;
                  }
                }
              }

              &:last-child {
                span {
                  color: #1890FF;
                }

                .el-icon-top {
                  color: #8FD835;
                }
              }
            }
          }
        }

        &.price {
          .center {
            .center-left .left-title {
              color: #999999;

              & + p {
                color: #F09A60;

                span {
                  &:last-child {
                    color: #999999;
                  }
                }
              }
            }
          }

          .bottom {
            span {
              &:nth-child(odd) {
                color: #999999;

              }

              &:nth-child(even) {
                color: #8FD835;
              }
            }
          }
        }
      }

    }
  }
</style>
